<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">曲线编号：</label>
            <el-input
                v-model="searchForm.lineName"
                style="width: 125px"
            />
        </div>
        <div class="filter-item">
            <label for="">计划日期：</label>
            <el-date-picker
                style="width: 220px"
                v-model="searchForm.dateTime"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :size="'default'"
            />
        </div>
        <!-- <div class="filter-item">
            <label for="">计划日期：</label>
            <el-date-picker
                style="width: 220px"
                v-model="searchForm.dateTime"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :size="'default'"
                :shortcuts="shortcuts"
            />
        </div> -->
        <div class="filter-item">
            <label for="">曲线类型：</label>
            <el-select
                v-model="searchForm.lineCategory"
                class="m-2"
                style="width: 145px"
            >
                <el-option
                    v-for="item in lineCategoryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">回测验证：</label>
            <el-select
                v-model="searchForm.isQualified"
                class="m-2"
                style="width: 145px"
            >
                <el-option
                    v-for="item in isQualifiedList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
            <el-button
                size="default"
                @click="reset"
            >重置</el-button>
        </div>
    </div>

    <!-- <div class="filter">
        <div class="filter-item">
            <el-button
                type="primary"
                @click="handleClick('add')"
            >新增</el-button>
        </div>
    </div> -->

    <el-table
        :data="tableData"
        style="width: 100%"
        id="inspectionTask"
    >
        <el-table-column
            type="index"
            label="序号"
            width="55"
        />
        <el-table-column
            prop="title"
            label="所属单位"
        >
            <template #default="scope">
                {{ depNameTranslate(scope.row.depId) }}
            </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="绘制日期"
            width="100"
        >
            <template #default="scope">{{ moment(scope.row.createTime).format('YYYY-MM-DD') }}</template>
        </el-table-column>
        <el-table-column
            prop="lineCategory"
            label="曲线类型"
        >
            <template #default="scope">
                {{ scope.row.lineCategory == 1 ? '氨氮曲线' : scope.row.lineCategory == 2 ? 'TN曲线' : 'TP曲线' }}
            </template>
        </el-table-column>
        <el-table-column
            prop="lineName"
            label="曲线编号"
        />
        <el-table-column
            prop="expression"
            label="曲线方程"
        />
        <el-table-column
            prop="isQualified"
            label="回测验证"
        >
            <template #default="scope">
                {{ scope.row.isQualified == 1 ? '合格' : scope.row.isQualified == 2 ? '不合格' : ' ' }}
            </template>
        </el-table-column>
        <el-table-column
            prop="taskCategory"
            label="检测人员"
        />
        <el-table-column
            prop="taskCategory"
            label="复核人员"
        />
        <!-- <el-table-column
            fixed="right"
            label="操作"
            width="160"
        >
            <template #default="scope">
                <el-button
                    type="primary"
                    size="small"
                    :icon="View"
                    @click="handleClick('detail', scope.row)"
                >
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    :icon="Edit"
                    @click="handleClick('edit', scope.row)"
                >
                </el-button>
                <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    @click="handleDelete(scope.row)"
                ></el-button>
            </template>
        </el-table-column> -->
    </el-table>
    <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginationStyle"
    />

    <el-dialog
        v-model="drawingVisible"
        :title="drawingTitle"
        width="792"
    >
    </el-dialog>
</template>

<script setup>
// utils
import taskHttp from "@/https/task.js";
import Storage from "@/utils/storage.js";
import moment from 'moment';
import { onMounted, ref } from "vue";

let searchForm = ref({
    depId: Storage.localGet("depId"),
    lineName: '',
    dateTime: [moment().add(-7, 'day').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
    lineCategory: "",
    isQualified: "",
    pageNo: 1,
    pageSize: 10,
});
const localTypeUnit = ref(Storage.localGet("depId"));
// dict
const depIdList = ref([
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const lineCategoryList = ref([
    { label: "全部", value: "" },
    { label: "氨氮曲线", value: "1" },
    { label: "TN曲线", value: "2" },
    { label: "TP曲线", value: "3" },
]);
const isQualifiedList = ref([
    { label: "全部", value: "" },
    { label: "合格", value: "1" },
    { label: "不合格", value: "2" },
]);
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
let tableData = ref([]);
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
// 重置
const reset = async () => {
    searchForm.value.title = ''
    searchForm.value.taskCategory = 1
    search()
}
// 查询
const search = async () => {
    let params = {
        ...searchForm.value
    }
    params.startTime = searchForm.value.dateTime ? moment(searchForm.value.dateTime[0]).format("YYYY-MM-DD") : ''
    params.endTime = searchForm.value.dateTime ? moment(searchForm.value.dateTime[1]).format("YYYY-MM-DD") : ''
    const res = await taskHttp.queryLinearEquationList(params)
    console.log(res.data.data, 'res')
    tableData.value = res.data.data.records
    total.value = res.data.data.total
}
const drawingVisible = ref(false)
const drawingTitle = ref(false)
const handleClick = (type, row) => {
    drawingVisible.value = true
}
onMounted(() => {
    search()
})
</script>